<template>
  <div v-if="meta.type != 'selection'" class="ivz-item-draggable"
       :style="style" @click.stop="activeHandle">
    <span class="ivz-column-title">{{model.title}}</span>
  </div>
  <div v-else class="ivz-item-draggable iva-th-selection">
    <a-checkbox />
  </div>
</template>

<script>
import {mapMutations} from "vuex";

export default {
  name: "IvzBasicTh",
  props: ['meta'],
  setup({meta}) {

    let model = meta['tabModel'];

    return {
      model
    }
  },
  computed: {
    style() {
      let {width, align} = this.model;

      if(!width) {
        return {textAlign: align}
      }

      let widthValue = this.model['width'] + 'px';
      return {width: widthValue, maxWidth: widthValue, textAlign: align};
    }
  },
  methods: {
    ...mapMutations(['switchActiveMetaTo']),
    activeHandle() {
      this.switchActiveMetaTo(this.meta);
    },
  }
}
</script>

<style scoped>
.ivz-item-draggable {
  height: 42px;
  padding: 8px 16px;
  line-height: 26px;
  flex-grow: 1;
  border-top: 1px solid #efefef;
  border-left: 1px solid #efefef;
  border-bottom: 1px solid #efefef;
}
.iva-th-selection {
  max-width: 64px;
  flex-grow: 0!important;
}
.ivz-column-title {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
</style>
